import { defineStore } from "pinia";
import { ref, readonly, computed } from "vue";

export const useThemeStore = defineStore('theme', () => {
    const colorList = readonly([
        {
            text: '晨曦金',
            value: '#FFD166',
        },
        {
            text: '碧海蓝',
            value: '#3DA9DE',
        },
        {
            text: '柔雾紫',
            value: '#9A7AA0',
        },
        {
            text: '森林绿',
            value: '#4A9C73',
        },
        {
            text: '珊瑚橙',
            value: '#FD8A5E',
        },
        {
            text: '天空蓝',
            value: '#87CEEB',
        }
    ]);

    const LATOUT_COLORS = readonly([{
        aColor: '#fff',
        hColor: '#fff',
        mColor: '#f0f2f5',
        aTextColor: '#000',
        mTextColor: '#000'
    }, {
        aColor: '#323549',
        hColor: '#fff',
        mColor: '#f0f2f5',
        aTextColor: '#fff',
        mTextColor: '#000'
    }, {
        aColor: '#001529',
        hColor: '#001529',
        mColor: '#000',
        aTextColor: '#fff',
        mTextColor: '#fff'
    }]);

    const layoutColorMode = ref<STORE.LayoutColorMode>(0);
    const layoutColor = computed(() => LATOUT_COLORS[layoutColorMode.value]); // 三大块的颜色
    const borderColor = computed(() => layoutColorMode.value === 2 ? '#313131' : '#f0f0f0'); // 边框颜色，表头颜色，input背景色
    const tableBgColor = computed(() => layoutColorMode.value === 2 ? '#141414' : '#fff'); // 表格背景色
    const tabColor = computed(() => layoutColorMode.value === 2 ? '#000' : '#fff'); // tab栏颜色，表格筛选款背景色
    const setColorMode = (index: STORE.LayoutColorMode) => {
        layoutColorMode.value = index;
    };

    const asideCollapsed = ref<boolean>(false);
    const menuMode = ref<STORE.MenuMode>(0); // 0:水平 1:垂直
    const setMenuMode = (index: STORE.MenuMode) => {
        asideCollapsed.value = index === 1 ? false : asideCollapsed.value; // 垂直时，菜单默认展开
        menuMode.value = index;
    };

    const primaryColor = ref<string>('#87CEEB'); // 主题颜色
    const themeHoverColor = computed(() => lightenColor(primaryColor.value, 0.2));

    const setThemeColor = (index: number) => {
        primaryColor.value = colorList[index].value;
    };

    // 提亮颜色的函数
    function lightenColor(color: string, amount: number): string {
        const [r, g, b] = hexToRgb(color);
        return `rgb(${Math.min(255, r + r * amount)}, ${Math.min(255, g + g * amount)}, ${Math.min(255, b + b * amount)},0.8)`;
    }

    // 将十六进制颜色转换为 RGB
    function hexToRgb(hex: string): [number, number, number] {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return [r, g, b];
    }

    return {
        primaryColor,
        colorList,
        LATOUT_COLORS,
        asideCollapsed,
        layoutColor,
        layoutColorMode,
        menuMode,
        tabColor,
        tableBgColor,
        borderColor,
        setMenuMode,
        setThemeColor,
        setColorMode,
        themeHoverColor
    };
}, { persist: true });